<template>
	<view class="container">
		<view class="search-bar">
			<view class="sousuo">
				<input type="text" class="search-input" />
				<image src="/static/搜索.svg" class="search-icon" mode="aspectFit" />
				<view class="search-button">搜索</view>
			</view>

		</view>

		<view class="order-list">
			<view class="order-item" v-for="(order, index) in orders" :key="index">
				<view class="order-info">
					<view class="service">{{ order.service }}</view>
					<view class="user">下单用户：{{ order.user }}</view>
				</view>
				<view class="order-details">
					<view class="amount">实付金额：￥{{ order.amount }}</view>
					<view class="time">核销时间：{{ order.time }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";

	const orders = ref([{
			service: "普通洗车、机油、工时",
			user: "张三",
			amount: 32.00,
			time: "2022-10-12 11:09",
		},
		{
			service: "普通洗车、机油、工时",
			user: "张三",
			amount: 32.00,
			time: "2022-10-12 11:09",
		},
		{
			service: "普通洗车、机油、工时",
			user: "张三",
			amount: 32.00,
			time: "2022-10-12 11:09",
		},
		{
			service: "普通洗车、机油、工时",
			user: "张三",
			amount: 32.00,
			time: "2022-10-12 11:09",
		},
	]);
</script>
<style scoped>
	.container {
		background-color: #f5f5f5;
	}

	.search-bar {
		display: flex;
		padding: 30rpx 0;
		align-items: center;
		/* margin-bottom: 20rpx; */
	}

	.sousuo {
		display: flex;
		position: relative;
		align-items: center;
		gap: 20rpx;
		height: 60rpx;
		border-radius: 10rpx;
		padding: 0 20rpx;
	}

	.search-input {
		padding: 10rpx 20rpx;
		font-size: 28rpx;
		width: 580rpx;
		background-color: #fff;
		height: 46rpx;
		border-radius: 16rpx;
	}

	/* 搜索图标样式 */
	.search-icon {
		position: absolute;
		right: 160rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 38rpx;
		height: 38rpx;
	}

	.search-button {
		font-size: 30rpx;
		font-weight: 700;
		color: blue;
		height: 100rpx;
		width: 100rpx;
		display: flex;
		align-items: center;
		/* justify-content: center; */
	}

	.order-list {
		/* display: flex; */
		/* flex-direction: column; */
		gap: 20rpx;
		font-weight: 550;
		/* padding: 10rpx; */
	}

	.order-item {
		background-color: #ffffff;
		padding: 30rpx 40rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
		margin-bottom: 6rpx;
	}

	.order-info {
		margin-bottom: 10rpx;

	}

	.service {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		padding-bottom: 8rpx;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
	}

	.user {
		font-size: 28rpx;
		color: #666666;
		margin-top: 10rpx;
	}

	.order-details {
		/* display: flex;
		justify-content: space-between; */
		margin-top: 10rpx;
	}

	.amount {
		font-size: 28rpx;
		color: #007aff;
		font-weight: bold;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
		padding-bottom: 16rpx;
	}

	.time {
		padding-top: 16rpx;
		font-size: 28rpx;
		font-weight: 550;
		color: #333;
		display: flex;
		align-items: center;
	}
</style>